<!-- 资金管理 -->
<template>
  <div class="capitalbox">
      <div class="topbox">
          <el-card class="box-card">
              <div class="num">{{info.sub_acct_avail_bal/100}}元</div>
              <div>&nbsp;</div>
              <div>可用余额</div>
              <div>&nbsp;</div>
          </el-card>
          <el-card class="box-card">
              <div class="num">{{info.sub_acct_cash_bal/100}}元</div>
              <div class="btn"><el-button type="primary" round size="mini" @click="withdraw()">提现</el-button></div>
              <div>可提现金额</div>
              <el-link class="bai" type="primary" @click="jumps">入账明细</el-link>&nbsp;&nbsp;
              <el-link class="bai" type="primary" @click="jump">出账明细</el-link>
          </el-card>
          <el-card class="box-card">
              <div class="num">{{info.sub_acct_freeze_amt/100}}元</div>
              <div>&nbsp;</div>
              <div>冻结金额</div>
              <div>&nbsp;</div>
          </el-card>
      </div>
      <div class="contentinfo">
          <el-card v-for="(item,index) in list" :key="index" class="box-card">
              <div class="num">{{item.cash_amt/100}}元</div>
              <div>{{item.sub_acct_no}}</div>
              <div>{{item.sub_acct_name}}</div>
          </el-card>
      </div>

      <el-dialog title="退款" :visible.sync="withdrawbox"  width="35%" :close-on-click-modal='false'>
        <div style="width:100%;text-align:center">
            <el-input style="width:60%" type="number" placeholder="请输入退款金额" v-model="money" clearable></el-input>
        </div>
        <div style="text-align: center;margin-top:20px"><el-button type="primary" @click="ok()">确定</el-button></div>
      </el-dialog>
  </div>
</template>

<script>

import { platacct,acctFunc,withdraw } from "@/api/api";
export default {
  data () {
    return {
        list:[],
        info:{},
        withdrawbox:false,
        money:''
    };
  },
  created(){
      this.platacct()
      this.acctFunc()
  },
  methods: {
      platacct(){
          platacct({}).then(res=> {
              console.log(res)
              
              if (res.code == 405) {
                    sessionStorage. removeItem("token");
                    this.$router.push("/login");
              } else if(res.data.return_code == 'SUCCESS'){
                this.info = res.data
              }else if(res.data.return_code == 'FAIL'){
                this.$message.error(res.message);
              }
          })
      },
      acctFunc(){
          acctFunc({}).then(res=> {
              console.log(res)
              if (res.code == 405) {
                    sessionStorage. removeItem("token");
                    this.$router.push("/login");
              } else if(res.data.return_code == 'SUCCESS'){
                this.list = res.data.result_list
              }else if(res.data.return_code == 'FAIL'){
                this.$message.error(res.message);
              }
          })
      },
      withdraw(){
          this.withdrawbox = true
          this.money = ''
      },
      ok(){
          withdraw({cash_amt:this.money*100}).then(res=> {
              console.log(res)
              if (res.code == 405) {
                    sessionStorage. removeItem("token");
                    this.$router.push("/login");
              } else if(res.data.return_code == 'SUCCESS'){
                  this.$message({
                        message: "提现受理成功",
                        type: "success"
                    });
                  this.withdrawbox = false
                  this.platacct()
                  this.acctFunc()
              }else if(res.data.return_code == 'FAIL'){
                this.$message.error(res.data.return_msg);
                this.withdrawbox = false
              }
            })
      },
      jump(){
          this.$router.push('/withdraw')
      },
      jumps(){
          this.$router.push('/recorded')
      }
  }
}

</script>
<style lang='less' scoped>
.capitalbox{
    width: 100%;
    .topbox{
        width: 100%;
        display: flex;
        .box-card{
            flex: 1;
            margin: 0 5px;
            text-align: center;
            box-sizing: border-box;
            color: #fff;
            .btn{
                margin-top: -10px;
                margin-bottom: 5px;
            }
            .num{
                font-size: 30px;
                font-weight: 600;
                margin-bottom: 20px;
            }
            .bai{
                color: #fff;
                text-decoration:underline;
            }
        }
        .box-card:nth-child(1){
            background: #2d8cf0;
        }
        .box-card:nth-child(2){
            background: #64d572;
        }
        .box-card:nth-child(3){
            background: #f25e43;
        }
        
    }
    .contentinfo{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 5%;
        .box-card{
            // background: #F56C6C;
            // color: #fff;
            width: 33%;
            margin: 5px 0;
            text-align: center;
            .num{
                font-size: 30px;
                font-weight: 600;
            }
        }
    }
}
</style>